<template>
	<div>
		<div class="car">
			<!-- <div id="shop_head">
				<a href="javascript:history.go(-1)"><img src="/static/imgm/img2/1.jpg"></a>
				<span>购物车</span>
				<img src="/static/imgm/img2/2.jpg">
			</div> -->
			<my-header :mmm='msg'></my-header>

			<div v-if="!showstate">
				<div id="shopempty_main">
					<img src="/static/imgm/img2/kong.png">
					<p>购物车还是空的</p>
					<span>快去逛逛吧`</span>
					<a href="">那就看看呗</a>
				</div>
			</div>	

			<div id="shop" v-if="showstate">	
				<div id="shop_hint">
					<p>!</p><span>自营商品实付满88元免运费</span>
				</div>
				<div id="shop_self">
					<p></p>
					<img src="/static/imgm/img2/jx.png">
					<p>酒仙自营</p>
				</div>
				<div id="shop_main" v-for="(l,index) in list">
					<div class="main_top">
						<p>满减</p><p>购299元立享【满299元减50元】</p>
					</div>
					<div class="main_bottom">
						<p></p>
						<img :src="l.img">
						<a href="#" class="name">{{l.name}}</a>
						<span>{{l.productPromo.price | money}}</span>
						<span>冰点价</span>
						<p @click="reduce(index)">-</p>
						<input type="text" :a="a" v-model="l.num">
						<p @click="add(index)">+</p>
						<a href="javascript:;" @click="remove(index)">删除</a>
					</div>
				</div>
				<div id="shop_foot">
					<p></p>
					<span>全选</span>
					<span>合计：</span>
					<span>优惠：</span>
					<span>{{total | money}}</span>
					<span>不优惠,滚~!</span>
					<a href="javascript:;">去结算({{totals}})</a>

				</div>
			</div>
		</div>
	</div>
</template>

<script>
import myHeader from './Header'
	export default{
		data(){
			return {
				list : {},
				a : 0,
				boxstate :false,
				shi : false,
				msg : "购物车"
			}
		},
		mounted(){
			this.list = this.$store.state.buys
			console.log(this.$store.state.buys)
			console.log(this.$store.state.total)
		},
		methods:{
			remove(index){
				//this.boxstate = true;

				if (confirm("删除??")){
					this.$store.commit("remove",index)
				}
				
				this.$store.commit("zong")
				
			},
			reduce(index){
				this.a--;
				this.$store.commit("reduce",index)

				this.$store.commit("zong")
				console.log(this.$store.state.total,this.$store.state.totals)
			},
			add(index){
				this.a++;
				this.$store.commit("add",index)
				//console.log(this.$store.state.buys)
				
				this.$store.commit("zong")
				console.log(this.$store.state.total,this.$store.state.totals)
			}
			
		},

		computed: {
			total(){
				let t = 0;
				if(this.$store.state.total!=0){
					t = this.$store.state.total
				}else{
					for(var i=0; i<this.list.length;i++) {
						t = t + (this.list[i].num*this.list[i].productPromo.price)
					}
				}
				
				return t

			},
			totals(){
				let s = 0;
				if(this.$store.state.totals!=0){
					s = this.$store.state.totals
				}
				else{
					for(var i=0; i<this.list.length;i++) {
						s = s + this.list[i].num
					}
				}
				return s
			},
			showstate(){
				let i = 0;
				for( var k in this.list){
					i++;
				}
				return i>0?true:false;
			}
		},
		filters : {
			money(val){
			return "¥"+Number(val).toFixed(2)
			}
		},
		components : {
			myHeader
		}
		
}
</script>


<style scoped>
.name{
	overflow: hidden;
	white-space: nowrap;
}
body{
	background:#fafafa; 
}
#shop{
	margin-top: 1rem;
}
#shop_hint{
	width: 100%;
	height: 55px;
	background:#fff4e2; 
	line-height: 55px;
	margin-bottom: 1px solid #ffeaca;
	margin-bottom:15px; 
}
#shop_hint p{
	width: 20px;
	height: 20px;
	border: 1px solid red;
	border-radius: 50%;
	line-height: 20px;
	text-align: center;
	display: inline-block;
	margin:  0 8px;
	color: red;
}
#shop_hint span{
	font-size: 23px;
	color:#ff6f69; 
}
#shop_self{
	width: 100%;
	height:100px;
	border-bottom: 1px solid #f3f3f3; 
	line-height: 100px;
	position: relative;
}
#shop_self p:nth-child(1){
	width: 40px;
	height: 40px;
	border: 1px solid #8a8a8a;
	border-radius: 50%;
	display: inline-block;
	margin: 0 11px;
	position: absolute;
	top:25px;
	left: 12px; 
	color: #474747;
	background: url("/static/imgm/img2/right.jpg") no-repeat;
	background-size: 100%;
}
#shop_self img:nth-child(2){
	position: absolute;
	top: 30px;
	left: 90px;
}
#shop_self p:nth-child(3){
	display: inline-block;
	margin-left: 6px;
	font-size: 30px;
	position: absolute;
	top: -2px;
	left: 130px;
}
#shop_main{
	width: 100%;
	height:300px;
	position: relative; 
	background: #fff;
}
#shop_main .main_top{
	position: absolute;
	top: 8px;
	left:33px; 
	width:100%;
	height: 24px;
	border-bottom: 1px solid #fcfcfc;
	padding-bottom: 40px;
}
#shop_main .main_top p:nth-child(1){
	width:64px;
	height: 24px;
	border:2px solid #b8b8b8; 
	color: #c58cff; 
	text-align: center;
	line-height: 24px;
	position: absolute;
	top: 11px;
	left: 14px;
	font-size: 23px;
}
#shop_main .main_top p:nth-child(2){
	width:380px;
	height: 24px;
	line-height: 24px; 
	color: #333333;
	position:absolute;
	top:12px;
	left:97px; 
	font-size: 25px;  
}
#shop_main .main_bottom{
	width: 100%;
	height: 280px;
	position: absolute;
	top: 70px;
	left: 0;
}
#shop_main .main_bottom p:nth-child(1){
	width: 40px;
	height: 40px;
	border: 1px solid #8a8a8a;
	border-radius: 50%;
	display: inline-block;
	margin: 0 11px;
	position: absolute;
	top:63px;
	left: 12px; 
	color: #474747;
	background: url("/static/imgm/img2/right.jpg") no-repeat;
	background-size: 100%;
	color: red;
}
#shop_main .main_bottom img:nth-child(2){
	width:150px;
	height: 150px;
	border: 1px solid #ebebeb;
	position: absolute;
	top:5px;
	left: 90px; 
}
#shop_main .main_bottom a:nth-child(3){
	width: 450px;
	height: 100px;
	position: absolute;
	top: 11px;
	left:264px; 
	font-size: 28px;
	color: #333333;
}
#shop_main .main_bottom span:nth-child(4){
	position: absolute;
	top:86px;
	left:264px;  
	color: red;
}
#shop_main .main_bottom span:nth-child(5){
	position: absolute;
	top: 86px;
	left:370px; 
	display: inline-block;
	width: 93px;
	height: 38px;
	background:#ffa855; 
	text-align: center;
	line-height: 38px;
	border-radius: 3px;
	color: #fff;
}
#shop_main .main_bottom p:nth-child(6){
	width: 40px;
	height: 40px;
	position: absolute;
	left: 278px;
	bottom: 100px;
	text-align: center;
	line-height: 40px;
	border: 2px solid #e5e5e5;
	border-right: none;
}
#shop_main .main_bottom input:nth-child(7){
	width:50px;
	height: 40px; 
	position: absolute;
	left: 325px;
	bottom: 100px;
	font-size: 24px;
	line-height: 40px;
	text-align: center;
}
#shop_main .main_bottom p:nth-child(8){
	width: 40px;
	height: 40px;
	position: absolute;
	left: 378px;
	bottom: 100px;
	text-align: center;
	line-height: 40px;
	border: 2px solid #e5e5e5;
	border-left: none;
}
#shop_main .main_bottom a:nth-child(9){
	width: 90px;
	height: 38px;
	position: absolute;
	right: 20px;
	bottom: 100px;
	font-size:26px;
	color: #000;
	line-height: 38px;
	text-align: center;
}

#shop_empty{
	width: 100%;
	height:640px;
	background:#f3f5f6;  
	margin-top: 2rem;
}

#shop_foot{
	width: 100%;
	height:110px;
	background: pink; 
	position: fixed;
	bottom: 0;
	right: 0;
	left: 0;
}
#shop_foot p:nth-child(1){
	width: 40px;
	height: 40px;
	border: 1px solid #8a8a8a;
	border-radius: 50%;
	display: inline-block;
	margin: 0 11px;
	position: absolute;
	top:29px;
	left: 12px; 
	color: #474747;
	background: url("/static/imgm/img2/right.jpg") no-repeat;
	background-size: 100%;
	color: red;
}
#shop_foot span:nth-child(2){
	color:#828282;
	position: absolute;
	top: 38px;
	left:76px; 
}
#shop_foot span:nth-child(3){
	position: absolute;
	top:14px;
	left: 138px;
	font-size: 32px; 
}
#shop_foot span:nth-child(4){
	position: absolute;
	top:55px;
	left: 138px;
	font-size: 32px; 
}
#shop_foot span:nth-child(5){
	position: absolute;
	top:14px;
	left: 238px;
	font-size: 32px; 
	color: #ff5353;
	font-size: 34px;
}
#shop_foot span:nth-child(6){
	position: absolute;
	top:55px;
	left: 238px;
	font-size: 32px; 
}
#shop_foot a:nth-child(7){
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	font-size: 38px; 
	width: 200px;
	height: 110px;
	background:#fd5a5b;
	color: #fff; 
	text-align: center;
	line-height: 110px;
}
#shopempty_main{
	font-size: .4rem;
	width:30%;
	height: 90vh;
	display: flex;
	flex-direction: column;
	align-items: center; 
	margin: 0 auto;
	margin-top: 1rem;
}
#shopempty_main img:nth-child(1){
	width: 120px;
	height: 120px;
	margin-top: 1rem;
}
#shopempty_main p:nth-child(2){
	color: #717272;
	margin-top: .4rem;
	font-family: "微软雅黑";
	margin-bottom: .3rem;
}
#shopempty_main span:nth-child(3){
	color: #ababac;
}
#shopempty_main a:nth-child(4){
	display: block;
	width:2rem;
	height: 40px;
	border: 2px solid #7e7e7e; 
	margin-top: 50px;
	line-height: 40px;
	text-align: center;
	color: #7a7a7a;
	background: #fff;
	border-radius: 5px;
	padding: .2rem

}

</style>